---
title: Compound variants
---

import Seo from '../../../components/Seo.astro'
import Badge from '../../../components/Badge.astro'

<Seo
    seo={{
        title: 'Compount variants',
        description: 'How to use compound variants in react-native-unistyles'
    }}
>

<Badge label="All platforms" />
<Badge label="2.0.0" />

Unistyles does not have first-class support for compound variants, but you can easily create them yourself.

First, you need to define your variants as described in [this guide](/reference/variants).

```tsx /size/ /color/
const stylesheet = createStyleSheet({
    container: {
        variants: {
            size: {
                small: {
                    width: 100,
                    height: 100
                },
                medium: {
                    width: 200,
                    height: 200
                },
                large: {
                    width: 300,
                    height: 300
                }
            },
            color: {
                red: {
                    backgroundColor: 'red'
                },
                green: {
                    backgroundColor: 'green'
                },
                blue: {
                    backgroundColor: 'blue'
                }
            }
        }
    }
})
```

The easiest way to create a compound variant is to use the [dynamic function](/reference/dynamic-functions/).

```tsx /size/ /color/
const stylesheet = createStyleSheet({
    container: {
        variants: {
            size: {
                small: {
                    width: 100,
                    height: 100
                },
                medium: {
                    width: 200,
                    height: 200
                },
                large: {
                    width: 300,
                    height: 300
                }
            },
            color: {
                red: {
                    backgroundColor: 'red'
                },
                green: {
                    backgroundColor: 'green'
                },
                blue: {
                    backgroundColor: 'blue'
                }
            }
        }
    },
    extraStyle: (size, color) => {
        if (size === 'small' && color === 'red') {
            return {
                borderWidth: 1,
                borderColor: 'black'
            }
        }

        if (size === 'medium' && color === 'green') {
            return {
                borderWidth: 2,
                borderColor: 'black'
            }
        }

        return {}
    }
})
```

You can now merge both styles into one component, as with the regular `StyleSheet.create`:

```tsx /size/ /color/
const MyComponent = ({ size, color }) => {
    const { styles } = useStyles(stylesheet, {
        size,
        color
    })

    return (
        <View style={[styles.container, styles.extraStyle(size, color)]} />
    )
}
```

</Seo>
